import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Select, Table, message,Button, TreeSelect ,Row, Col, Popconfirm} from 'antd';
var _this,_props,_state;
import ApplyModal from '../../components/using/ApplyModal';

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class AddApplyModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        if(values.detailList!=null&&values.detailList.length>0){           
            onOk(values);
        }else{
            message.error('请选择申请设备信息');
        }
      }
     });
  };

  render() {
    const { children, dispatch,deptTree,assetType,detailList,item,userList,} = this.props;
    const { getFieldDecorator } = this.props.form;
    _this = this;
    _state = this.state;
    _props = this.props;

    const handleDeptChange = (value) => {
      this.props.form.setFieldsValue({userId: undefined});//设置modelId控件的值为空
      dispatch({
        type: 'apply/qryUserByDept',
        payload: {deptId:value },
      });       
    }

    const deleteHandler = (id) => {
        for(var i=0;i<detailList.length;i++){
            if(detailList[i].id==id){
               detailList.splice(i,1);
            }
        }
         dispatch({
            type: 'apply/changeDetailList',
            payload:detailList,
         });    
    }
    // 编辑申请设备详情
    const  editDetailHandler = (record) => {
        dispatch({
          type: 'apply/showApplyDetail',
          payload:{detailItem:record,detailModalType:'edit'},
        });
    }
    // 添加申请设备详情
    const  showApplyDetailHandler = () => {
        dispatch({
          type: 'apply/showApplyDetail',
          payload:{detailModalType:'create'},
        });
    }

    const treeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.depts && d.depts.length > 0 ? treeData(d.depts) : [];
        return d;
      })
    }

   const getUser = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
   })


    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };
    const columns = [{
        title: '序号',
        dataIndex: 'xh',
        key: 'xh',
        width: 100,
        render: (value, row, index) => (
              <div>{index+1}</div>
          ),
      },{
        title: '资产分类',
        dataIndex: 'typeVo',
        key: 'typeVo',
        width: 100,
        render: (value, row, index) => (
              <div>{value.label}</div>
        ),
      }
      // ,{
      //   title: '数量',
      //   dataIndex: 'count',
      //   key: 'count',
      //   width: 100,
      // }
      ,{
        title: '备注',
        dataIndex: 'desc',
        key: 'desc',
        width: 100,
      },{
        title: '操作',
        key: 'operation',
        width: 100,
        render: (text, record) => (
            <span>          
                <a onClick={editDetailHandler.bind(null, record)}>编辑</a>
                <span className="ant-divider" />
                <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id)}>
                <a>删除</a>
                </Popconfirm>
            </span>
        ),
      }];

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                zIndex={10}
                width={700}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <div style={{backgroundColor:'#fff'}}>
            <div style={{}}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px',marginTop:'-16px'}}>
                <Form layout="inline">
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('detailList',{initialValue:detailList})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>
                  <Row gutter={16}>
                     <Col span={12}>
                      <FormItem
                          label="申请部门"
                          hasFeedback
                      >
                         {
                          getFieldDecorator('branchId', {
                            rules: [{
                              required: true, whitespace: true, message: '请选择领用部门',
                            }]
                          })(
                            <TreeSelect
                              style={{ width: 225 }}
                              showSearch
                              treeNodeFilterProp="title"
                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                              placeholder="请选择领用部门"
                              allowClear
                              treeData={treeData(deptTree)}
                              onChange={handleDeptChange}
                              treeDefaultExpandAll
                            >                            
                            </TreeSelect>
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem
                          label="领用人"
                          hasFeedback
                      >
                          {getFieldDecorator('userId', {
                            rules: [{
                              required: true, whitespace: true, message: '请选择领用人',
                            }]
                          })(
                              <Select
                                  showSearch
                                  style={{ width: 235 }}
                                  placeholder="领用人"
                                  optionFilterProp="children"
                          >
                                {getUser(userList)}
                              </Select>
                          )}
                      </FormItem>
                    </Col>
                    </Row>
                </Form>
            </div>

            <div style={{width:'100%',marginTop:'20px',textAlign:'right',paddingRight:'20px'}}>
               <FormItem>
                  <Button type="primary" size='large' onClick={showApplyDetailHandler}>新增申请</Button>
               </FormItem>
            </div>

            <div style={{}}>
                  <div style={{width:'100%',padding:"0px 20px 10px",}}>
                    <Table columns={columns}
                        rowKey={record => record.id}
                        dataSource={detailList}
                        pagination={false}
                      />
                  </div>
              </div>
            </div>
        </div>

        </Modal>

      </span>
    );
  }

}

export default Form.create()(AddApplyModal)
